<template>
  <div style="width: 1140px;">
    <el-row :gutter="20">
      <el-col :span="16">
        <img :src="bigImg.url" alt="图片加载失败" style="width: 100%; height: 345px;">
        <h3 class="title mt20">{{ clearHtml(previewData.title) }}</h3>
        <el-row :gutter="20" class="mt20">
          <el-col :span="12">
            <div class="content" v-if="previewData.content">{{ clearHtml(previewData.content) }}</div>
          </el-col>
          <el-col :span="12">
            <div class="content" v-if="previewData.content1">{{ clearHtml(previewData.content1) }}</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <div class="rightImg" v-for="(item, index) in rightImg" :key="index">
          <img :src="item.url" alt="图片加载失败" style="width: 100%; height: 193px">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Template_1',
  props: {
    previewData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      bigImg: '',
      rightImg: []
    }
  },
  mounted() {
    let data = JSON.parse(JSON.stringify(this.previewData.previewImg));
    if(data.length > 0) {
      this.bigImg = data.shift();
      this.rightImg = data.slice(0, data.length)
    }
  },
  methods: {
    clearHtml(row) {
      return row.replace(/<[^>]+>/g, "");
    }
  }
}
</script>

<style scoped lang="scss">
  img{
    border-radius: 4px;
  }
  .rightImg{
    margin-bottom: 15px;
  }
  .title{
    font-size: 22px;
    font-weight: bold;
  }
  .content{
    text-indent: 30px;
  }
</style>